<template>
  <div>
    <listPage
    ref="listPageRef"
    pageTitle="关系型数据库服务"
    :btnList="btnList"
    :addBtnList="addBtnList"
    :tableData="tableData"
    :allColumn="tableColumn"
    :tableColumn="showColumn"
    @setColumn="(val)=>{showColumn=val}"
    ></listPage>
    <!-- 高可用管理弹窗 -->
    <pdlog v-model="showUse" width="508px" title="配置变更" @comfirm="showUse = false" @cencel="showUse = false">
      <div class="edit-dialog" style="margin-bottom: 20px;">
        <div class="name">高可用模式</div>
        <el-input class="w233" size="small" v-model="backupN" placeholder="请输入"></el-input>
      </div>
      <div class="edit-dialog">
        <div class="name">高可用模式</div>
        <el-radio-group v-model="useRadio">
          <el-radio :label="1">主备</el-radio>
          <el-radio :label="2">负载</el-radio>
        </el-radio-group>
      </div>
      <div class="edit-dialog">
        <div class="name">磁盘扩容</div>
        <plist ref="pList" :tableData="newTableData6" :tableColumn="tableColumn6" :hasIndex="false" :hasSelect="true">
        </plist>
      </div>
    </pdlog>
    <!-- 监控弹窗 -->
    <pdlog ptop="8%" v-model="showMonitor" width="780px" title="配置变更" @comfirm="showMonitor = false" @cencel="showMonitor = false">
      <monitor></monitor>
    </pdlog>
    <!-- 配置变更弹窗 -->
    <pdlog v-model="showconfigChange" width="418px" title="配置变更" @comfirm="showconfigChange = false" @cencel="showconfigChange = false">
      <div class="edit-dialog" style="margin-bottom: 20px;">
        <div class="name">当前使用状态</div>
        <el-progress style="width:200px;" :percentage="useStatus"></el-progress>
      </div>
      <div class="edit-dialog">
        <div class="name">磁盘扩容</div>
        <el-input-number class="w215" size="small" v-model="diskExpansion" :min="1" ></el-input-number>
        <span style="margin-left: 3px;">GB</span>
      </div>
    </pdlog>
    <!-- 创建备份弹窗 -->
    <pdlog v-model="showBackup" width="418px" title="创建备份" @comfirm="showBackup = false" @cencel="showBackup = false">
      <div class="edit-dialog">
        <div class="name">备份名称</div>
        <el-input class="w233" size="small" v-model="backupN" placeholder="请输入"></el-input>
      </div>
      <div class="edit-dialog">
        <div class="name">备份描述</div>
        <el-input type="textarea" class="w233" v-model="backupD" :autosize="{ minRows: 3}" placeholder="请输入"></el-input>
      </div>
    </pdlog>
    <!-- 用户管理弹窗 -->
    <pdlog v-model="showEdit" width="516px" title="用户管理" @comfirm="showEdit = false" @cencel="showEdit = false">
      <plist ref="pList" :tableData="newTableData2" :tableColumn="tableColumn2" :hasIndex="false" :hasSelect="true">
      </plist>
    </pdlog>
    <!-- 消息弹窗 -->
    <pdlog v-model="showTip" width="418px" :title="tipName" @comfirm="showTip = false" @cencel="showTip = false">
      <div class="btn-msg">
        请确认是否进行{{tipName}}？
      </div>
    </pdlog>
  </div>
</template>

<script>
  import listPage from '@/components/listPage'
  import {getPassRelationdb} from '@/api/pageList'
  import monitor from './monitor.vue'
  
  export default {
    data() {
      return {
        newTableData6:[{name:'rds-e916',id:'9cc0d34404b9cc0d34404b'},{name:'rds-e916',id:'9cc0d34404b9cc0d34404b'},],
        tableColumn6:[
          {
            field: "name",
            label: "实例名称",
          },
          {
            field: "id",
            label: "实例ID",
          },
        ],
        useRadio:1,
        showUse:false,
        showMonitor:false,
        showconfigChange:false,
        useStatus:60,//使用状态
        diskExpansion:'', // 磁盘扩容
        showBackup:false,
        backupN:'',
        backupD:'',
        tipName:'',
        showTip:false,
        newTableData2:[{name:'root',status:'Qa132eds',ip:'超级管理员'},{name:'admin',status:'Qa132eds',ip:'业务管理员'},{name:'admin1',status:'Qa132eds',ip:'审计员'}],
        tableColumn2:[
          {
            field: "name",
            label: "用户名",
          },
          {
            field: "status",
            label: "密码",
          },
          {
            field: "ip",
            label: "权限",
          },
        ],
        addBtnList:[
          {
            id:1,
            name:'创建数据库实例',
            handle:()=>{this.$router.push({path:'/passsucserver/releationalSqlAdd'})},
          },
          {
            id:2,
            name:'查看全部备份文件',
            handle:this.handleBackupList
          },
          {
            id:3,
            name:'查看参数模板',
            handle:this.gotoParams
          }
        ],
        btnList:[
          {
            id:1,
            name:'删除',
            handle:()=>this.handleClick('删除')
          },
        ],
        options: [
          
        ],
        showLog: false, // 控制台弹窗
        logValue: null, // 控制台值
        editValue: null, // 编辑值
        showEdit: false, // 编辑弹窗
        showColumn: [], // 展示列
        tableColumn: [{
            field: "name",
            label: "名称",
          },
          {
            field: "status",
            label: "状态",
            width: 100,
            isStatus: true,
            format:(val)=>{
              return {
                1:'注册中',
                2:'运行中',
                3:'删除中',
                4:'已删除',
                5:'正在开机',
              }[val]
            }
          },
          {
            field: "db_engine",
            label: "数据库引擎",
            sortable: true
          },
          {
            field: "engine_version",
            label: "引擎版本",
            sortable: true

          },
          {
            field: "instance_type",
            label: "实例类型",
            sortable: true
          },
          {
            field: "network_ip",
            label: "内网地址",
            sortable: true
          },
          {
            field: "isaudits",
            label: "是否审计",
            sortable: true
          },
          {
            field: "operation",
            type: "handler",
            label: "操作",
            width: 400,
            btnlist: [
            {
                name: '用户管理',
                handle: this.handleEdit
              },
              {
                name: '创建备份',
                handle: this.handleBackup
              },
              {
                name: '配置变更',
                handle: this.handleConfigChange
              },
              {
                name: '监控',
                handle: this.handleMonitor
              },
              {
                name: '高可用管理',
                handle: this.handleUse
              },
            ]
          },
        ],
        tableData: [],
      }
    },
    components: {
      listPage,
      monitor
    },
    created() {
      this.init()
    },
    methods: {
      handleBackupList() {
        this.$router.push({path: '/passsucserver/sqlBackup'})
      },
      init(){
        this.showColumn = this.tableColumn
        this.getData()
      },
      getData(params={}){
        console.log('~~~~~~~~~',params)
        // 请求
        getPassRelationdb().then(res => {
          if(res.code==200){
            let data = JSON.parse(res.data)
            this.tableData = data
            console.log('~~~~~~',this.tableData);
          }
        })
      },
      gotoParams(){
        this.$router.push({path:'/passsucserver/paramsManage'})
      },
      handleAdd() {
        console.log('跳转新增页');
        // this.$router.push({
        //   path: '/physical/physicalMachineAdd'
        // })
      },
      selectedData(){
        return this.$refs.listPageRef.getSelectedData()
      },
      handleClick(name) {
        this.tipName = name
        // 获取选中数据
        let selectRow = this.selectedData()
        console.log('@@@@@@',)
        this.showTip = true

        // this.$axios.get('http://47.95.194.212:6601/api/physical').then(res=>{
        //   console.log('@@@@@',res)
        // })
      },
      handleccc() {
        console.log('6666666666666');
      },
      setTable() {
        this.$refs.settingTable.init()
      },
      handleLog(index, row) {
        console.log(index, row);
        this.showLog = true
      },
      handleEdit(index, row) {
        console.log(index, row);
        this.showEdit = true
      },
      handleDetail(index, row) {
        console.log(index, row);
      },
      handleBackup(){
        this.showBackup =true
      },
      handleConfigChange(){
        this.showconfigChange =true
      },
      handleMonitor(){
        this.showMonitor = true
      },
      handleUse(){
        this.showUse = true
      }
      
    }
  }
</script>

<style scoped lang="less">
  .edit-dialog {
    margin: 0px 20px 10px;
    display: flex;
    align-items: center;
    .name {
      font-weight: 650;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.847058823529412);
      margin-right: 25px;
    }
    .el-input {
      width: 233px;
    }
  }
</style>
